<template>
  <div v-if="!isSign" class="container login-container">
    <div class="title">
      <p>Hi~</p>
      <p>欢迎注册成为代理商</p>
    </div>
    <form>
      <!-- 消除自动填充 -->
      <input type="text" style="display:none" />
      <input
        type="password"
        autocomplete="new-password"
        style="background-color: #FFFFFF!important;display:none"
        readonly
        onfocus="this.removeAttribute('readonly');"
        onblur="this.setAttribute('readonly',true);"
      />

      <div class="form-item">
        <div class="form-inp">
          <img src="../assets/login/phone.png" />
          <input type="Number" ref="phone" placeholder="请输入手机号码" v-model="phone" autocomplete="off" />
        </div>
        <div class="form-icon">
          <img
            src="../assets/login/delete.png"
            v-show="phone"
            class="delete"
            @click="handleDeleteVal('phone')"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-inp">
          <img src="../assets/login/password.png" />
          <input
            :type="isRead ? 'text' : 'password'"
            ref="password"
            placeholder="设置6～18位登录密码"
            v-model="password"
            autocomplete="new-password"
          />
        </div>
        <div class="form-icon">
          <img
            src="../assets/login/delete.png"
            v-show="password"
            class="delete"
            @click="handleDeleteVal('password')"
          />
          <img
            v-show="password && !isRead"
            src="../assets/login/close_eye.png"
            alt
            @click="handleReadPwd"
          />
          <img
            v-show="password && isRead"
            src="../assets/login/open_eye.png"
            alt
            @click="handleReadPwd"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-inp">
          <img class="email-icon" src="../assets/login/email.png" />
          <input type="Number" ref="code" placeholder="请输入短信验证码" v-model="code" autocomplete="off" />
        </div>
        <div class="form-codeBtn">
          <span v-if="!downShow" @click="getCode">获取验证码</span>
          <span v-else class="downNum-btn">重新发送（{{downNum+'s'}}）</span>
        </div>
      </div>

      <div class="form-item">
        <div class="form-inp">
          <img src="../assets/login/phone.png" />
          <input
            type="Number"
            ref="tjPhone"
            placeholder="推荐人手机号码（选填）"
            v-model="tjPhone"
            autocomplete="off"
          />
        </div>
        <div class="form-icon">
          <img
            src="../assets/login/delete.png"
            v-show="tjPhone"
            class="delete"
            @click="handleDeleteVal('tjPhone')"
          />
        </div>
      </div>
      <div class="login-tip">
        <p>
          已有账号？
          <span @click="goLogin">去登陆</span>
        </p>
      </div>

      <button
        @click.prevent="signHandle"
        :class="phone && password && code  && checked ? 'login active' : 'login' "
      >注册</button>
      <div class="contract">
        <input id="contracts" type="checkbox" name="checkbox" v-model="checked" />
        <label for="contracts"></label>
        <p>
          我已阅读并同意
          <span @click="agreementHandle(1)">《木头云用户服务协议》</span>和
          <span @click="agreementHandle(0)">《云木屋 运营协议》</span>
        </p>
      </div>
    </form>
  </div>
  <div v-else class="sign-success">
    <div class="content">
      <img class="success-img" src="@/assets/login/signCg.png" alt />
      <h2>注册成功</h2>
      <p>前往实名认证，轻松赚取代理费</p>
      <span @click="goAuthentication">去实名认证</span>
    </div>

    <div class="footer">
      <span @click="goLogin">退出当前账号 ></span>
    </div>
  </div>
</template>

<script>
import { getToken, setToken, removeToken, setWebToken } from "@/utils/auth";
import { Notify } from "vant";
import { register, sendSms } from "@/api/login";
export default {
  data() {
    return {
      phone: "",
      // phone: "15112765331",
      password: "",
      // password: "123456",
      isRead: false,
      code: "",
      tjPhone: "",
      downShow: false,
      timer: null,
      downNum: "",
      checked: true,
      isSign: false,
    };
  },
  created() {},
  watch: {
    phone(val) {
      if (val.length >= 11) {
        this.phone = val.substring(0, 11);
      }
    },
    tjPhone(val) {
      if (val.length >= 11) {
        this.tjPhone = val.substring(0, 11);
      }
    },
    code(val) {
      if (val.length >= 6) {
        this.code = val.substring(0, 6);
      }
    },
  },
  methods: {
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode() {
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (this.phone == "") {
        Notify({ type: "warning", message: "请输入手机号" });
      } else if (this.phone && !reg.test(this.phone)) {
        Notify({ type: "warning", message: "手机号码格式错误" });
      } else {
        let req_data = {
          reqdata: JSON.stringify({
            t: `${new Date().getTime()}`,
            mobile: this.phone,
            action: "register",
          }),
        };
        sendSms(req_data).then((res) => {
          if (res.code == 1) {
            this.countDown();
            Notify({ type: "success", message: "发送成功，请注意查收短信" });
          } else {
            this.$toast.fail(res.msg || "发送失败");
          }
        });
      }
    },

    // 注册
    async signHandle() {
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (this.phone == "") {
        Notify({ type: "warning", message: "请输入手机号" });
      } else if (this.phone && !reg.test(this.phone)) {
        Notify({ type: "warning", message: "手机号码格式错误" });
      } else if (this.password == "") {
        Notify({ type: "warning", message: "请输入密码" });
      } else if (this.code == "") {
        Notify({ type: "warning", message: "请输入短信验证码" });
      } else if (this.tjPhone && !reg.test(this.tjPhone)) {
        Notify({ type: "warning", message: "推荐人手机号码格式错误" });
      } else if (!this.checked) {
        Notify({
          type: "warning",
          message: "请阅读并同意《木头云用户服务协议》和《云木屋 运营协议》",
        });
      } else {
        try {
          this.$toast.loading({
            duration: 0,
            message: "正在注册账号",
            forbidClick: true,
            loadingType: "spinner",
          });
          let req_data = {
            reqdata: JSON.stringify({
              t: `${new Date().getTime()}`,
              mobile: this.phone,
              password: this.password,
              code: this.code,
              refferee: this.tjPhone,
            }),
          };
          let signRes = await register(req_data);
          console.log("signRes", signRes);
          this.$toast.clear();
          if (signRes.code == 1) {
            setToken(decodeURI(signRes.token));
            setWebToken(decodeURI(signRes.token));
            this.isSign = true;
          } else if (signRes.code == 10189) {
            this.$toast.fail("短信验证码验证错误");
          } else {
            this.$toast.fail(signRes.msg || "注册失败，请重试");
            return false;
          }
        } catch (error) {
          console.log("注册失败", error);
          this.$toast.clear();
        }
      }
    },
    //忘记密码
    handleForWord() {
      this.$router.push({
        path: "/edit_pwd",
      });
    },
    // 删除输入框内容
    handleDeleteVal(str) {
      this[str] = "";
      this.$refs[str].focus();
      this.isRead = false;
    },
    handleReadPwd() {
      this.isRead = !this.isRead;
    },
    // 前往登录
    goLogin() {
      this.$router.push({
        name: "login",
      });
    },
    // 去实名认证
    goAuthentication() {
      this.$router.push({
        name: "explain",
      });
    },
    // 协议查看
    agreementHandle(flag) {
      if (flag) {
        // 服务协议
        console.log(process.env.VUE_APP_SERVISE);
        window.open(process.env.VUE_APP_SERVISE, "_self");
      } else {
        // 运营协议
        console.log(process.env.VUE_APP_OPERATE);
        window.open(process.env.VUE_APP_OPERATE, "_self");
      }
    },
  },
};
</script>
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #2d3a4b;
$light_gray: #333;
$cursor: #333;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  input {
    background: transparent;
    border: none;
    -webkit-appearance: none;
    border-radius: 0px;
    color: $light_gray;
    caret-color: $cursor;
    &:-webkit-autofill {
      box-shadow: 0 0 0px 1000px transparent inset !important;
      -webkit-text-fill-color: $cursor !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
  }
}
</style>

<style scoped lang='scss'>
.sign-success {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .content {
    margin-top: 400px;
    .success-img {
      width: 515px;
      height: 225px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    h2 {
      font-size: 36px;
      font-weight: 600;
      color: #111;
    }
    p {
      padding: 30px 0 50px 0;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    span {
      display: inline-block;
      width: 310px;
      height: 88px;
      background: rgba(254, 96, 24, 0);
      border: 1px solid rgba(236, 236, 236, 1);
      border-radius: 4px;
      line-height: 88px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(254, 96, 24, 1);
    }
  }
  .footer {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
  }
}
.container {
  width: 100vw;
  padding: 110px 50px 0 50px;

  .title {
    text-align: left;
    font-size: 50px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(17, 17, 17, 1);
    margin-bottom: 96px;
    > p:nth-of-type(1) {
      margin-bottom: 30px;
    }
  }
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 68px;
    text-align: initial;
    position: relative;
    .form-inp {
      width: 76%;
      display: flex;
      input {
        flex: 1;
      }
    }
    .form-icon {
      // width: 24%;
      width: 160px;
    }
    .form-codeBtn {
      color: #387eff;
      position: absolute;
      right: 0;
      .downNum-btn {
        color: #c0c4cc;
      }
    }

    > div:nth-of-type(1) {
      > img:nth-of-type(1) {
        width: 26px;
        height: 36px;
        vertical-align: middle;
        margin-right: 22px;
        &.email-icon {
          width: auto;
          margin-right: 19px;
        }
      }
    }
    > div:nth-of-type(2) {
      > img {
        width: 30px;
        height: 20px;
        vertical-align: middle;
        margin-left: 50px;
      }
      > .delete {
        width: 26px;
        height: 26px;
      }
    }

    > input {
      font-size: 30px;
      color: #111111;
      &::placeholder {
        color: #cccccc;
      }
    }
    &:nth-of-type(4) {
      margin-bottom: 30px;
    }
  }
  .login-tip {
    font-size: 28px;
    color: #999;
    text-align: right;
    span {
      color: #fe6018;
    }
  }
  .edit-pwd {
    text-align: right;
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 44px;
  }
  .login {
    width: 650px;
    height: 90px;
    line-height: 90px;
    font-size: 30px;
    color: #fff;
    margin-top: 50px;
    background: linear-gradient(
      90deg,
      rgba(255, 212, 154, 1),
      rgba(255, 191, 163, 1)
    );
    border-radius: 4px;
    &.active {
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
    }
  }
  .contract {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 0;
    padding-left: 20px;
    font-size: 26px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: left;
    p {
      line-height: 40px;
    }
    input[type="checkbox"] {
      visibility: hidden;
      margin-right: 16px;
    }
    #contracts + label {
      display: block;
      position: absolute;
      top: 35px;
      left: 0;
      width: 22px;
      height: 22px;
      background: rgba(241, 241, 241, 1);
      border: 2px solid rgba(167, 167, 167, 1);
      border-radius: 2px;
    }
    #contracts:checked + label::before {
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      background: url("../assets/goods/ok.png") no-repeat;
      background-size: 100% 100%;
    }
    span {
      color: #111111;
    }
  }
  .footer {
    font-size: 28px;
    color: #999;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    span {
      color: #387eff;
    }
  }
}
</style>
